<template>
    <Form v-if="form" ref="form" :model="form" :label-width="80" :rules="ruleValidate">
        <br/>
        <FormItem v-if="classpictype=='one'" label="相册名称" prop="album_name.zh" style="width:50%">
            <div @keyup.enter="handleSubmit('form')">
                <Input v-model="form.album_name.zh" placeholder="相册名称" style="width:80%"></Input>
            </div>
        </FormItem>
        <FormItem label="封面图" v-if="(classpicinfo!=false&&classpictype=='one')||classpicinfo==false">
             <upload ref='upload' :multipletr="false" @imagess='imagess' :Universalurl="formpic.cover"></upload>
        </FormItem>
        <FormItem label="相片" v-if="(classpicinfo!=false&&classpictype=='all')">
             <upload ref='upload' @imagess='imagess' :Universalurl="formpic_pl.file_cache_id"></upload>
        </FormItem>
        <div style="width:90%;">
            <FormItem style="width:100%; margin:40px 0">
                <Button type="primary" @click="handleSubmit('form')">保存</Button>
            </FormItem>
        </div>
        <div style="clear:both"></div>
        <Spin size="large" fix v-if="spinShow"></Spin>
    </Form>
</template>

<script>
export default {
    props: {
        infoId: {
            type: [Boolean,Number],
            default: false
        },
        classpicinfo: {
            type: [Boolean,Object],
            default: false
        },
        classpictype: {
            type: [String],
            default: 'one'
        }
    },
    components: {
        Upload: resolve => {require(['&/Authpub/Upload.vue'], resolve);},
    }, 
    data () {
        return {
            spinShow:false,
            saveUrl:'api/eclass/v1/album/create',//保存接口
            saveType:this.$http.post,//保存方式
            form:null,
            // 班级相册封面图上传
            formpic:{
                eclass_id:this.infoId,//班级ID
                cover:this.classpicinfo.cover,//图片id
                album_name:{
                    zh:null,
                    en:null,
                    mn:null,
                   
                },//相册名称
                album_type_id:this.classpicinfo.album_type_id,
            },
            // 班级图图集上传
            formpic_pl:{
                eclass_id:this.infoId,//班级id
                album_type_id:this.classpicinfo.album_type_id,//封面如id
                file_cache_id:[],//相册名称
            },
            ruleValidate: {
                'album_name.zh': [
                    { required: true, message: '请填写相册名称', trigger: 'blur' }
                ],
            },
        }
    },
        
    methods: {
        /************************************************************
         * 
         * 图片上传成功后
         * 
         ************************************************************/
        imagess(val){  
            console.log(val)
            if(this.classpictype=='one'){
                // 表示封面图上传 
                this.formpic.cover=val
            }
            if(this.classpictype=='all'){
                // 表示封面图上传 
                this.formpic_pl.file_cache_id=val
            }
        },
        
        /************************************************************
         * 
         * 保存数据请求
         * 
         ************************************************************/ 
        handleSubmit (name) {
            this.lodeSubmit()
            if(this.classpictype=='one'){
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.spinShow=true
                        this.saveType(this.saveUrl,this.form).then(val=>{
                            this.$emit('on-save',false)
                            this.$Message.success(val.message);
                            this.spinShow=false
                        }).catch(err => {
                            if (err.code && err.code == 422) {
                                this.$Message.error(err.message);
                            }
                            this.spinShow=false
                        })
                    } else {
                        this.$Message.error('验证失败');
                    }
                })
            }
            if(this.classpictype=='all'){
                if(this.formpic_pl.file_cache_id.length==0){
                    this.$Message.error('请选择图片');
                    return

                }
                this.spinShow=true
                this.saveType(this.saveUrl,this.form).then(val=>{
                    this.$emit('on-save',false)
                    this.$Message.success(val.message);
                    this.spinShow=false
                }).catch(err => {
                    if (err.code && err.code == 422) {
                        this.$Message.error(err.message);
                    }
                    this.spinShow=false
                })
            }
        },

        /************************************************************
         * 
         * 当进页面和提交时
         * 
         ************************************************************/
        lodeSubmit () {
            if(this.classpictype=='one'){
                // 表示封面图上传
                this.form=this.formpic
                if(this.classpicinfo==false){
                    // add
                    this.saveUrl='api/eclass/v1/album/create',//保存接口
                    this.saveType=this.$http.post//保存方式
                }else{
                    // edit
                    this.formpic.eclass_id=this.infoId
                    this.formpic.album_name.zh=this.classpicinfo.album_name.zh
                    this.saveUrl=`api/eclass/v1/album/update/${this.classpicinfo.album_type_id}`,//保存接口
                    this.saveType=this.$http.put//保存方式
                }
            }
            if(this.classpictype=='all'){
                // 表示图片集上传
                this.form=this.formpic_pl
                // add
                this.saveUrl='api/eclass/v1/album/editpicture',//保存接口
                this.saveType=this.$http.post//保存方式

            }
             
        }
    },
    mounted(){
        if(this.classpicinfo!=false){
            this.lodeSubmit()
        }
        else{
            this.formpic.cover = '';
            this.formpic.album_name.zh = '';
            this.formpic.album_name.mn = '';
            this.formpic.album_name.en = '';
            this.formpic.album_type_id= '';
            this.form = this.formpic;
        }
    },
}
</script>